<template>
    <div class="member">
        <van-nav-bar :title="title" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="memberContent">
            <div class="memberAll">
                <div class="memberPerformance">
                    <p>总业绩</p>
                    <p class="memberPerformanceNum">￥{{salesDetail.memberTeamSales}}</p>
                </div>
                <div class="memberPerformance">
                    <p>本月业绩</p>
                    <p class="memberPerformanceNum">￥{{salesDetail.memberTeamMonthSales}}</p>
                </div>
                <div class="memberPerformance">
                    <p>上月业绩</p>
                    <p class="memberPerformanceNum">￥{{salesDetail.memberTeamLastMonthSales}}</p>
                </div>
            </div>
            <div class="memberList">
                <ul>
                    <li v-for="item in teamGroup" :key="item.memberId">
                        <img :src="item.avatar"/>
                        <div class="desc">
                            <h4>
                                {{item.nickname}}
                                <span>（{{item.levelName}}）</span>
                            </h4>
                            <p>手机号：{{item.mobile}}</p>
                            <p>直属人数：{{item.childNums}}人</p>
                            <p>加入时间：{{item.createTime}}</p>
                        </div>
                        <div class="btns">
                            <button @click="getSales(item.memberId)">查看详情</button>
                            <button @click="getInventory(item.memberId)">查看库存</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import api from "@/utils/restful";

    export default {
        data() {
            return {
                teamGroup: [],
                salesDetail: {},
                title: ""
            }
        },
        mounted() {
            this.getTeamList();
            this.getMyTeamSalesDetail();
        },
        methods: {
            getTeamList() {
                this.$axios({
                    method: "get",
                    url: api.teamTree,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    if (res) {
                        this.teamGroup = res.data;
                        this.title = "直属人员" + this.teamGroup.length + "人";
                    }
                });
            },
            getMyTeamSalesDetail() {
                this.$axios({
                    method: "get",
                    url: api.myTeamSalesDetail,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res) {
                        this.salesDetail = res.data;
                    }
                });
            },
            getSales(memberId) {
                this.goto("memberdetail", {memberId: memberId});
            },
            getInventory(memberId) {
                this.goto('memberinventory', {memberId: memberId});
            },
            goto(name, query) {
                this.$router.push({name: name, query: query});
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .member {
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;

        .memberContent {
            flex-grow: 1;
            overflow: scroll;

            .memberAll {
                font-size: calc(18rem / 37.5);
                font-weight: bolder;
                text-align: center;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: center;
                padding: calc(16rem / 37.5);
                margin: calc(10rem / 37.5) calc(10rem / 37.5) 0;
                box-sizing: border-box;
                background-color: #fff;
                box-shadow: 0px 0px 4px 0px rgba(202, 202, 202, 1);
                border-radius: 18px;

                .memberPerformanceNum {
                    font-size: calc(10rem / 37.5);
                    color: #868686;
                }
            }

            .memberList > ul {
                margin: calc(10rem / 37.5);
                background-color: #fff;
                box-shadow: 0px 0px 4px 0px rgba(202, 202, 202, 1);
                border-radius: calc(18rem / 37.5);

                li {
                    padding: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                img {
                    width: 75px;
                    height: 75px;
                    border-radius: 50%;
                    border: 1px solid rgba(255, 255, 255, 0.66);
                }

                .desc {
                    h4 {
                        .font-dpr(16px);
                        color: @fontColorH3;

                        span {
                            .font-dpr(14px);
                            color: #868686;
                        }
                    }

                    p {
                        .font-dpr(11px);
                        color: @tipColor;
                    }
                }

                .btns {
                    width: 65px;

                    button {
                        width: 100%;
                        height: 24px;
                        background: #50a1f4;
                        border-radius: 4px;
                        color: #fff;
                        font-weight: 600;
                        margin-top: 1px;
                    }
                }
            }
        }
    }
</style>
